<template>
	<div id="index">
		<indexNav></indexNav>
		<div class="magin-top"></div>
		<div id="container">
			<div id="main">
				<router-view></router-view>
				<!-- <indexToc></indexToc> -->
			</div>
				<foot></foot>
		</div>
		<el-backtop target="#index"></el-backtop>
	</div>
</template>

<script>
import indexNav from '@/components/nav/nav.vue';
import indexToc from '@/components/nav/toc.vue';
import foot from '@/components/common/foot.vue';
export default {
	components: {
		indexNav,
		indexToc,
		foot
	}
};
</script>

<style lang="scss">
#index {
	height: 100%;
	overflow: auto;
}
#container {
	// float: right;
	width: 80%;
	padding-right: 25%;
	height: 100%;
	margin-left: 20%;
	padding-left: 20px;
}
#main {
	background-color: #fff;
	min-height: 100vh;
	box-shadow: 0 0 16px rgb(0 0 0 / 12%);
}
@media screen and (max-width: 768px) {
	#main {
		width: 100%;
	}
	#container {
		width: 100%;
		height: 100%;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0px;
	}
	#index {
		.magin-top {
			height: 55px;
		}
		.el-backtop{
			right: 10px !important;
			bottom: 20px !important;
		}
	}
}
</style>
